<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="/static/css/edmure.css"/>
    <link rel="stylesheet" href="/static/css/commons.css"/>
    <link rel="stylesheet" href="/static/css/account.css"/>
    <style>

    </style>
</head>
<body>
<div class="register">
    <div style="font-size: 25px; font-weight: bold;text-align: center;">
        用户注册
    </div>
    <form role="form" method="POST" id="fm" action="{% url "register" %}">
        {% csrf_token %}
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            <div class="alert alert-danger hide">
                <span id="spuser"></span>
            </div>
        </div>

        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
            <div class="alert alert-danger hide">
                <span id="spemail"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">{{ obj.errors.pwd }}

            <div class="alert alert-danger hide">
                <span id="sppwd"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="confirm_password">确认密码</label>
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请重新输入密码">{{ obj.errors.cnpwd }}
            <div class="alert alert-danger hide">
                <span id="spcnpwd"> </span>
            </div>
        </div>

        <div class="form-group">
            <label for="password">验证码</label>

            <div class="row">
                <div class="col-xs-7">

                    <input type="password" class="form-control" id="check_code" name="check_code" placeholder="请输入验证码">{{ obj.errors.pwds }}
                </div>
                <div class="col-xs-5">
                    <img id="check_code_img" src="/check_code.html" onclick="changeCheckCode(this);">
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-xs-3">
                <a id="submit" class="btn btn-default">注册</a>
            </div>
            <div class="col-xs-3">
                <a href="{% url 'login' %}" class="btn btn-default">直接登陆</a>
            </div>
            <div class="col-xs-9" style="padding-left: 0;">
                <div class="alert alert-danger hide">
                    <span style="padding: 0 5px 0 5px;display: inline-block;font-size: 14px">
                        <i class="fa fa-minus-circle" aria-hidden="true"></i>
                    </span>
                    <span id="error_msg" style="font-size: 12px;"></span>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/js/accordion.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script>
     $(function () {
            bindLogin();
        });

     function bindLogin() {
            $('#submit').click(function () {
                var $msg = $('#error_msg');//用来验证码错误 提示
                var spuser=$('#spuser');//用户
                var spemail=$('#spemail');//邮箱
                var sppwd=$('#sppwd');//密码
                var spcnpwd=$('#spcnpwd');//确认密码
                $msg.parent().addClass('hide');//初始为隐藏提示标签
                spuser.parent().addClass('hide');
                spemail.parent().addClass('hide');
                sppwd.parent().addClass('hide');
                spcnpwd.parent().addClass('hide');
                $.ajax({
                    url: '{% url "register" %}',
                    type: 'POST',
                    data: $('#fm').serialize(),//表单所有内容
                    dataType: 'JSON',
                    success: function (arg) {
                        //alert(arg.status);
                        console.log(arg);
                        if(arg.status){
                            alert('注册成功');
                            location.href = '/';//跳 转到主页
                        }else{
                            //判断是否有这个错误信息
                            if (arg.error.username!=null){
                                spuser.parent().removeClass('hide');
                                spuser.text(arg.error.username[0].messages);
                            }
                            if (arg.error.user!=null){
                                spuser.parent().removeClass('hide');
                                spuser.text(arg.error.user);
                            }
                            if (arg.error.email!=null){
                                spemail.parent().removeClass('hide');
                                spemail.text(arg.error.email[0].messages);
                            }
                            if(arg.error.password!=null){
                                sppwd.parent().removeClass('hide');
                                sppwd.text(arg.error.password[0].messages);
                            }
                            if(arg.error.confirm_password!=null){
                                spcnpwd.parent().removeClass('hide');
                                spcnpwd.text(arg.error.confirm_password[0].messages);
                            }
                            if(arg.error.check_code!=null){
                                $msg.parent().removeClass('hide');//移除隐藏提示标签
                                $msg.text(arg.error.check_code[0].messages);
                            }
                            var img = $('#check_code_img')[0];//图片验证码变量
                            img.src = img.src + '?';//重载图片验证码
                            $('#password,#confirm_password,#check_code').val('');//密码和验证码框清空
                        }
                    }
                })

            })
        }
     //刷新验证码
     function changeCheckCode(ths){
            ths.src = ths.src +  '?';
        }


</script>
</body>
</html>